<template>
  <div class="domestictradecontract">
  
    <div class="head clearfix">
      <export-excel module-name="businessform_domestictradecontract" file-name="内贸合同.xlsx"></export-excel>
      <h2>内贸合同</h2>
      <div class="head-ctrl">
        <div class="order-number">
          {{businessformNO}}
        </div>
        <!-- <el-button type="primary">导出</el-button> -->
      </div>
    </div>
  
    <div class="head-title">
      <img class="tcf-png" src="../../../../assets/img/tcf.png" alt="">
      <p> <span>天津金贸链进出口有限公司</span></p>
      <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
      <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
      <p> TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
      <p>天津自贸试验区（空港经济区）环河南路88号2-2205号</p>
      <h2>采购合同PURCHASE CONTRACT </h2>
    </div>
  
    <div class="head-1">
      <div class="clearfix">
        <div class="head-1-right">
          <el-form label-width="80px">
            <el-form-item label="编号NO:">
              <input class="address-input relate-color" placeholder="请输入相关内容" @input="hanldeSimpleInput('bd_no', $event)" :readonly="!editable" v-model="bd_no" />
            </el-form-item>
  
            <el-form-item label="日期Date:">
              <el-date-picker class="relate-color" value-format="yyyy-MM-dd" :readonly="!editable" @change="selectDate" v-model="bd_date"></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  
    <div class="head-2">
      <p><span>需方BUYER:</span> 天津金贸链进出口有限公司</p>
      <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
      <p><span>地址ADDERSS:</span> 天津自贸试验区（空港经济区）环河南路88号2-2205号 NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA
      </p>
      <p><span>电话TEL:</span> 010-50911255 传真FAX: 010-50911288 邮箱EMAIL:</p>
    </div>
  
    <div class="head-3">
      <el-form label-width="120px">
        <el-form-item label="供方SELLER:">
          <el-select class="relate-color" :disabled="!editable" @change="selSeller" v-model="bd_seller">
            <el-option v-for="(item, index) in bd_sellerOptions " :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
  
        <el-form-item label="地址ADDRESS:">
          <input class="address-input relate-color"  placeholder="请输入相关内容" @input="hanldeSimpleInput('bd_sellerAddress', $event)" :readonly="!editable" v-model="bd_sellerAddress">
        </el-form-item>
      </el-form>
  
      <el-form :inline="true">
        <el-form-item label="电话TEL:">
          <input class="address-input relate-color"  placeholder="请输入相关内容" @input="hanldeSimpleInput('bd_sellerTel', $event)" :readonly="!editable" v-model="bd_sellerTel">
        </el-form-item>
        <el-form-item label="传真FAX:">
          <input class="address-input relate-color"  placeholder="请输入相关内容" @input="hanldeSimpleInput('bd_sellerFax', $event)" :readonly="!editable" v-model="bd_sellerFax">
        </el-form-item>
  
        <el-form-item label="邮箱Email:">
          <input class="address-input relate-color"  placeholder="请输入相关内容" @input="hanldeSimpleInput('bd_sellerEmail', $event)" :readonly="!editable" v-model="bd_sellerEmail">
        </el-form-item>
      </el-form>
  
      <p>
        <p>根据《中华人民共和国合同法》及其他有关法律、法规之规定，买卖双方经过协商，确认根据下列条款订立合同，以资共同遵照执行。</p>
        <p>
          The seller and Buyer (the Parties) have entered into this Contract based on the following terms and conditions through friendly negotiations and in accordance with the Contract Law of the People’s Republic of China and other applicable laws and regulations.
        </p>
  
    </div>
  
    <div class="table">
      <p class="table-title"><span>1.  货物清单及价格 Goods and Price	</span></p>
      <el-table :data="bd_table1"  border style="width: 100%" >
        <el-table-column label="序号">
          <el-table-column type="index" label="NO" :index="indexMethod"></el-table-column>
        </el-table-column>
  
        <el-table-column label="产品" min-width="100">
          <el-table-column prop="bd_table1_products" label="DESCRIPTION OF GOODS">
            <template slot-scope="scope">
                  <span  class="cell-edit-input">
                    <el-tooltip effect="dark"  :content="scope.row.bd_table1_products || '暂无内容'"  placement="top">
                      <input  @input="handleTableInput(scope, 'bd_table1_products', $event)" placeholder="请输入相关内容"   :readonly="!editable" v-model="scope.row.bd_table1_products" >
                    </el-tooltip>
                  </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="规格型号" min-width="100">
          <el-table-column prop="bd_table1_description" label="SPECIFICATION MODEL">
            <template slot-scope="scope">
              <span class="cell-edit-input">
                    <el-tooltip effect="dark"  :content="scope.row.bd_table1_description || '暂无内容'"  placement="top">
                     <input  @input="handleTableInput(scope, 'bd_table1_description', $event)" placeholder="请输入相关内容"   :readonly="!editable" v-model="scope.row.bd_table1_description" >
                  </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="数量" min-width="100">
          <el-table-column prop="bd_table1_quantity" label="QUANTITY(PCS)">
            <template slot-scope="scope">
              <span class="cell-edit-input">
                     <input  @input="handleTableInput(scope, 'bd_table1_quantity', $event)" placeholder="请输入相关内容"   :readonly="!editable" v-model="scope.row.bd_table1_quantity" >
                  </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="单价"  min-width="100"  :render-header="currencySel('单价')">
          <el-table-column prop="bd_table1_price" label="Unit Price"  :render-header="currentSelEN('Unit Price')">
            <template slot-scope="scope">
              <span class="cell-edit-input">
                     <input  @input="handleTableInput(scope, 'bd_table1_price', $event)" placeholder="请输入相关内容"   :readonly="!editable" v-model="scope.row.bd_table1_price" >
                  </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="金额"  min-width="100">
          <el-table-column prop="bd_table1_lineAmount" label="AMOUNT" :render-header="currentSelEN('AMOUNT')" >
            <template slot-scope="scope">
              <span class="cell-edit-input">
                    <input type="number" @input="handleTableInput(scope, 'bd_table1_lineAmount', $event)" :readonly="!editable" :min="0" v-model="scope.row.bd_table1_lineAmount"/>
                  </span>
            </template>
          </el-table-column>
        </el-table-column>


        <el-table-column v-if="editable" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="addNewLine(scope.$index, bd_table1)" type="text" size="small">
           添加</el-button>
          <el-button @click="removeCurrentLine(scope.$index, bd_table1)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="extra-table">

         <el-row class="extra-money">
            <el-col :span="8"><div>Total</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8">
              <input type="number" v-model="bd_table1_amount" @input="handleSimpleInput('bd_table1_amount', $event)"/>
              </el-col>
         </el-row>

          <el-row class="extra-money">
            <el-col :span="8"><div>Deposit定金</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8">
              <input v-model="bd_depositMoney" @input="handleSimpleInput('bd_depositMoney', $event)"/>
              </el-col>
         </el-row>

        <el-row class="extra-money">
            <el-col :span="8"><div>Balance 尾款</div></el-col>
            <el-col :span="8"><div>&nbsp;</div></el-col>
            <el-col :span="8"><div><input v-model="bd_balanceMoney" @input="handleSimpleInput('bd_balanceMoney', $event)"/></div></el-col>
         </el-row>
    </div>


    <div class="head-4">
      <div>
        <p><span>2. 货物用途 Intended Use of Goods</span></p>
        <p>需要所购买货物全部用于出口。All the goods shall be exported.</p>

        <p><span>3. 货物的质量要求Goods Quality</span></p>
        <p>供方提供的货物必须符合中华人民共和国国家及行业标准。 供方对出口产品的质量、数量、规格、包装、交货期、售后服务等产品供应效果负责； 因产品质量、数量、规格、包装、交货期、售后服务等产品供应效果引起的法律责任和经济损失均由供方承担； 供方应保证实际装车出口的产品与需方申报出口的产品在品名、品质、规格、数量上完全一致,负责承担由此产生的一切责任和后果。
        </p>
        <p>
          The goods provided by the seller must comply with People’s Republic of China standard. The seller shall be responsible for the quality, quantity, specifications, packaging, time of delivery, after-sales services, and other supply-related issues of the
          products to be exported. Any legal liability and economic losses incurred by product supply such as quality, quantity, specifications, packaging, time of delivery, and after-sales services shall be borne by the seller. The seller shall warrant
          that the products exported eventually are totally consistent with the products that the Buyer has declared for export, in terms of product name, quality, specifications, and quantity, and take any and all liabilities and consequences incurred
          thereby.
        </p>


        <p><span>4. 产品的包装标准Packing</span></p>
        <p>
          国家或业务主管部门有技术规定的，按技术规定执行；国家与业务主管部门无技术规定的，由供需双方商定。 产品的包装费用，由供方承担。如果由于不适当的包装而导致的货物损坏和由此产生的费用，卖方应对此负完全的责任。
        </p>
        <p>
          In the event that national or competent authorities have published specific technical standards, the products shall be packaged in accordance with such technical standards; otherwise, the seller and the Buyer may negotiate and determine the packaging
          standards. The packaging costs shall be borne by the seller.The Sellers shall be liable for any damage of the commodity and expenses incurred on account of improper packing and for any rust attributable to inadequate or improper protective measures
          taken by the sellers in regard to the packing
        </p>
        <p><span>5. 交货约定 Goods Delivery</span></p>
        <p>合同签订后，供方准备发货前两周，应每周通知备货进度。
          <p>
            <p>After the contract is signed, two weeks before the goods is ready to be delivered, The seller must notify the buyer every week.</p>


            <p><span>6. 运输方式及费用负担Transportation and Payment of Costs</span></p>
            <p>6.1 由供方/需方/ R海外买家指定货物运输公司，运输费用及保险费用由□供方/需方/ R海外买家 负担。</p>
            <p>The Seller/Buyer/ROverseas buyer shall appoint a cargo company and the transportation and insurance costs shall be paid by the □Seller/Buyer/ ROversea Buyer</p>
            <p>
              6.2 供方发货后2个工作日内需提供：(1）《工厂出库单》 (2)《装箱单》 (3) 发货时与物流方的货物交接凭证 (4)发货图片信息（包括全部货物相关的封柜前装货图片、车辆牌照，铅封号、集装箱号）
              <p>
                <p>
                  The seller should provide below documents within 2 days after delivery: (1) 《The Delivery Note》 (2) 《Packing List》 (3) Cargoes handover file with logistic company (4) Delivery related pictures including loading photos, vehicle license plate, container
                  No.and seal No.

                </p>
                <p>
                <span>
                7. 结算方式及期限
              </span>
            </p>
            <p>7.1货款的结算：需方在收到此笔业务对应外贸合同项下的全套运输单据、发票及全额外汇后， 按双方约定的付款方式及付款时间结算此合同项下的货款。
            </p>
            <p>
              Payment: The Buyer shall make the payment hereunder in accordance with the terms and time of payment as agreed upon,after having received all transport-related vouchers, invoices and the payment made by foreign customers with regard to the sales under
              respective foreign trade contract.
            </p>
            <p>
              7.2 供方银行信息 Supplier's bank information：</p>
              <div>
                <p class="table-title">
                  <span>户&nbsp;名:</span>
                  <input class="address-input"  placeholder="请输入相关内容" @change="handleSimpleInput('bd_ch_name', $event)"  :readonly="!editable" v-model="bd_ch_name">
                </p>
                <p class="table-title">
                  <span>开户行:</span>
                  <input class="address-input"  placeholder="请输入相关内容" @change="handleSimpleInput('bd_ch_bankOfDeposit', $event)"  :readonly="!editable" v-model="bd_ch_bankOfDeposit">
                </p>
                <p class="table-title">
                  <span>账&nbsp;号:</span>
                  <input class="address-input"  placeholder="请输入相关内容" @change="handleSimpleInput('bd_ch_account', $event)"  :readonly="!editable" v-model="bd_ch_account">
                </p>
              </div>
              <p>
                The seller’s Account Information: </p>
                <!-- <div>
                  <p class="table-title">
                    <span>Account Name:</span>
                    <el-input  placeholder="请输入相关内容"  :readonly="!editable" v-model="data.bd_en_name"></el-input>
                  </p>
                  <p class="table-title">
                    <span>Bank:</span>
                    <el-input  placeholder="请输入相关内容"  :readonly="!editable" v-model="data.bd_en_bankOfDeposit"></el-input>
                  </p>
                  <p class="table-title">
                    <span>Account Number:</span>
                    <el-input  placeholder="请输入相关内容"  :readonly="!editable" v-model="data.bd_en_account"></el-input>
                  </p>
                <div> -->

                    <p>7.3 需方在该合同货物报关出口有电子口岸数据后1周内出具《开票通知单》， 供方需在收到通知单5个工作日内开具增值税专用发票给需方；
                    </p>
                    <p>The buyer will issue VAT INVOICE NOTIFICATION within 1 week after getting the custom E-port data, The seller must issue VAT infoicewithin 5 working days from receiving the NOTIFICATION.</p>

                    <p><span>8. 免责条款Escape Clause</span></p>
                    <p>
                      双方约定由于水灾、火灾、地震、台风、战争等不可抗拒的原因，导致合同不能全部或部分履行（或适当履行）的， 免除相应的违约责任。受到上述免责事项影响的一方，应在10天内通知另一方。如果受上述免责事项的影响， 使本合同义务之履行延迟的时间超过180天，则任何一方均有权解除合同而不承担任何后果，也可有双方协议采取其他补救措施
                    </p>
                    <p>
                      The Parties hereby agree that neither party shall take the liability for breach of contract for any failure to perform this Contract in whole or in part (or properly) where such failure is caused or results from by floods, fires, earthquakes, typhoons,
                      wars or any other acts of god. The party affected by the foregoing force majeure shall notify the other party within ten days. In the event that the performance of any obligation hereunder is delayed for more than 180 days due to the
                      foregoing force majeure, any party shall have the right to rescind this Contract without assuming any consequence, or the Parties may a gree to take any other remedial measures.
                    </p>

                    <p>
                      <span>9.解决合同纠纷的方式 Resolving of Disputes</span>
                    </p>
                    <p>
                      因履行合同发生的争议、纠纷由当事人协商解决，若双方协商不成，任何一方有权向需方所在地的人民法院起诉。
                    </p>
                    <p> Any dispute or controversy arising from the performance of this Contract shall be resolved through consultations between the Parties. In the event such consultations fail, any party shall be entitled to launch a lawsuit to the court
                      in the place where the Buyer is located.
                      <p>
                        <p><span>
                          10.其他约定 Miscellaneous Agreements </span></p>
                          <p>
                            10.1 供、需双方应保守通过签订和履行本合同而获取的对方之商业及技术秘密，包括本合同文本，相关技术文件、相关数据，以及其他有关信息 </p>
                            <p>The seller and the Buyer shall keep confidential any and all trade secrets and know-hows acquired by entering into and performing this Contract, including the contents of this Contract, relevant technical documents, data and any
                              other information.
                            </p>
                            <p>10.2 供方保证产品的版权、商标权、专利权等知识产权均已在海关总署办理了真实有效的知识产权备案， 并将知识产权的相关备案书面证明及知识产权所有者出具给供方的授权在本协议签订之时交给需方， 否则，供方承担因此遭受的包括需方损失在内的法律责任及经济损失。
                            </p>
                            <p> The seller warrants that the copyright, right of trade mark, patent, and other intellectual property with regard to the products have been filed in the General Administration of Customs of the People’s Republic of China, truly and
                              effectively, and that written filing documents with respects to such intellectual property and the authorization issued by the intellectual property owner to the seller will be delivered to the Buyer when this Contract is executed;
                              otherwise, the seller shall take any and all legal liabilities and economic losses incurred thereby, including the losses of the Buyer.
                            </p>
                            <p> 10.3 本合同未尽事宜，供需双方可另行协商一致后签署补充协议。附件、补充协议作为本合同不可分割的组成部分，与本合同具体同等法律效力</p>
                            <p> For matters not mentioned
                              herein, the Parties may enter into a supplementary agreement through friendly consultations. Any appendix and supplementary agreement shall form an integral part of this Contract and have same legal effects as this Contract.
                            </p>
                            <p>
                              <span>
                                11.合同生效 Effectiveness </span></p>
                                <p>
                                  本合同由供需双方于签署于天津，自双方盖章之日起生效。本合同以中文版为准,一式贰份，卖买双方各执壹份
                                </p>
                                <p>The contract is signed in Tianjin ,it takes effects since it is sealed by the both parties. In this contract,the Chinese version shall divvail.This contract signed in two copies,each party holds one copy only.
                                </p>

                                <div class="sign">
                                  <el-row>
                                    <el-col :span="10">买方盖章 Buyer：</el-col>
                                    <el-col :span="10">卖方盖章 Seller:</el-col>
                                  </el-row>
                                  <p>天津金贸链进出口有限公司 TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
                                </div>
                            </div>


                            <div class="upload">
                              <p class="upload-hint">票据/附件</p>
                              <div>
                                <div class="upload-btn">
                                  <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles"/>
                                  <el-button :disabled="!editable" type="primary">选择附件</el-button>
                                </div>

                                <ul class="upload-files">
                                  <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles" :key="index">
                                    <span @click="download(item.id, $event)">{{item.name}}</span>
                                    <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
                                    <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
                                  </li>
                                </ul>
                              </div>
                            </div>
                        </div>
                        </div>
                    </template>

<script>
import { uploadFiles, getBusinessMesg } from "@/server/initiatingprocess";
import { filedownload, deleteFile } from "@/server/customermanagement/index.js";
import { toFixed } from "@/util/transform.js";
import {handleEmit} from '../common.js';
import exportExcel from '../../common/exportExcel.vue';

export default {

  created() {
    const self = this;

    //将props获取的数据赋值给当前组件
    this.keys.forEach(key => {
      this[key] = _.cloneDeep(this.datas[key]);
    });

        //接收外贸合同的表格的添加，删除
    this.bus.$on("domestictradecontract-table", function(arg){

      let index = arg[1];
      let srcData = arg[2];


      if (arg[0] === 'add') {
        //添加

        let  data = {
            bd_table1_products: srcData.bf_table1_product,
            bd_table1_description: srcData.bf_table1_description,
            bd_table1_quantity: srcData.bf_table1_quantity,
            bd_table1_price: srcData.bf_table1_price,
            bd_table1_lineAmount: srcData.bf_table1_lineAmount
        }; 

        if ((index - self.bd_table1.length) >= 1) {
          self.bd_table1.push(data);
        } else {
          self.bd_table1.splice(index, 0, data);
        }

      } else if(arg[0] === 'delete'){
        //删除
        if (self.bd_table1.length - 1 >= index) {
          self.bd_table1.splice(index, 1);
        }
      }

      self.bd_table1_amount = self.computedTableTotal(self.bd_table1);
      self.emitToParent();
    });


    //接收外贸合同 的单元格修改时
    this.bus.$on("domestictradecontract-table-line", function(arg){

      let lineIndex = arg[0], key = self.prevMapCur[arg[1]];
      let srcData = arg[2];

      //表格有该索引时，才进行修改
      if (lineIndex  <= (self.bd_table1.length - 1)) {
        let temp = _.cloneDeep(self.bd_table1[lineIndex]);
        temp[key] = srcData;

        // if (key === "bd_table1_price" || key === "bd_table1_quantity") {
        //   temp.bd_table1_lineAmount = toFixed(Number(temp.bd_table1_quantity) * Number(temp.bd_table1_price));
        //   self.bd_table1.splice(lineIndex, 1, temp);
        //   self.bd_table1_amount = self.computedTableTotal(self.bd_table1);
        // } else if (key === "bp_table1_lineAmount") {
        //   self.bd_table1_amount = self.computedTableTotal(self.bd_table1);
        // } else {
        //   self.bd_table1.splice(lineIndex, 1, temp);
        // }

        if (key === 'bd_table1_price'){
          temp[key]  =  toFixed(srcData);
          temp.bd_table1_lineAmount = toFixed(Number(temp.bd_table1_quantity) * Number(temp.bd_table1_price));
          self.bd_table1.splice(lineIndex, 1, temp);
          self.bd_table1_amount = self.computedTableTotal(self.bd_table1);
          
        } else if (key === 'bd_table1_quantity'){
          temp[key]  =  Number.isNaN(parseInt(srcData).toString()) ? '0' : parseInt(srcData).toString();
          temp.bd_table1_lineAmount = toFixed(Number(temp.bd_table1_quantity) * Number(temp.bd_table1_price));
          self.bd_table1.splice(lineIndex, 1, temp);
          self.bd_table1_amount = self.computedTableTotal(self.bd_table1);

        } else if (key === 'bp_table1_lineAmount'){
          temp[key] = toFixed(srcData);
          self.bd_table1.splice(lineIndex, 1, temp);
          self.bd_table1_amount = self.computedTableTotal(self.bd_table1);
          
        } else {
            self.bd_table1.splice(lineIndex, 1, temp);
        }

        self.emitToParent();
      }
    });

    this.bus.$on("domestictradecontract-currency", function(arg){
      self.bd_currencyValue = arg[0];
      self.emitToParent();
    });

    this.bus.$on("domestictradecontract-order-number", function(arg){
      self.fromFCOrderNumber = arg[0];

      if (self.currentSelMesg.customerAbbreviation) {
        self.bd_no =
        self.fromFCOrderNumber +
        self.currentSelMesg.customerAbbreviation +
        "-" + (self.index - 2);
      }

      self.emitToParent();
    });


    getBusinessMesg({
      type: 2
    }).then(response => {
      this.businessMesg = response.data.datas;

      this.bd_sellerOptions = [];

      this.businessMesg.forEach(e => {
        this.bd_sellerOptions.push(e.customerName);
      });
    });
  },

  watch: {
    datas(newValue, oldValue){
      //将props获取的数据赋值给当前组件
      this.keys.forEach(key => {
        this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },
  methods: {

    /**
     * 数据发生改变时，通知父组件
     */
    emitToParent(){
      let newData = {};
      this.keys.forEach(key => {
        newData[key] = _.cloneDeep(this[key]);
      });
      this.$emit("fromDC", "businessform_domestictradecontract", this.index - 3, newData);
    },

     /**
     *  数据更新之后 通知需要关联的组件
     * @param {String} eventName
     * @param {String} option
     * @param {Array} value
     */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },
    indexMethod(value) {
      let lines = this.bd_table1.length;
      return value + 1;
    },

    selSeller(value) {
      let now = new Date();
      let m = now.getMonth() + 1;
      let d = now.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;

       this.currentSelMesg = this.businessMesg.find(e => {
        return e.customerName == value;
      });

      this.bd_sellerAddress = this.currentSelMesg.customerAddress;
      this.bd_sellerTel = this.currentSelMesg.customerPhone;
      this.bd_sellerFax = this.currentSelMesg.customerFax;
      this.bd_sellerEmail = this.currentSelMesg.customerEmail;

      /* 开户信息中文 */
      this.bd_ch_name = this.currentSelMesg.customerBankAccountNameCHS;
      this.bd_ch_bankOfDeposit = this.currentSelMesg.customerOpeningBankCHS;
      this.bd_ch_account = this.currentSelMesg.customerBankAccountNumCHS;


      this.bd_no =
        this.fromFCOrderNumber +
        this.currentSelMesg.customerAbbreviation +
        "-" +
        (this.index - 2);
      
      this.emitToParent();
    },

    selectDate(value){
      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },

    hanldeSimpleInput(){

      if (key === 'bd_table1_amount' || key === 'bd_depositMoney' ||  key === 'bd_balanceMoney' ) {
        if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
        this[key] =  event.target.value;
        } else {
        this[key] =  toFixed(event.target.value);
        }
      }
      this.emitToParent();
    },

    /**
     * 处理表格的输入框
     */
    handleTableInput(scope, key, event){
      let oldData = _.cloneDeep(this.bd_table1[scope.$index])

      switch(key) {
          case 'bd_table1_price':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
              oldData[key] =  event.target.value;
              } else {
              oldData[key] =  toFixed(event.target.value);
              }
            oldData.bd_table1_lineAmount = toFixed(oldData.bd_table1_price * oldData.bd_table1_quantity);
            this.bd_table1.splice(scope.$index, 1, oldData);
            this.bd_table1_amount = this.computedTableTotal(this.bd_table1);
            break;
          case 'bd_table1_quantity':

            oldData[key] = Number.isNaN(parseInt(event.target.value)) ? '0' : parseInt(event.target.value).toString(); ;
            oldData.bd_table1_lineAmount = toFixed(oldData.bd_table1_price * oldData.bd_table1_quantity);
            this.bd_table1.splice(scope.$index, 1, oldData);
            this.bd_table1_amount = this.computedTableTotal(this.bd_table1);
            break;
          
          case 'bd_table1_lineAmount': 
            this.bd_table1_amount = this.computedTableTotal(this.bd_table1);
            break;
      }


        handleEmit(null, ()=> {
          //通知父组件
          this.emitToParent();
        });
    },


     /**
     * 计算表格的金额 总和
     * @param {Array} table
     * @return {String} 
     */
    computedTableTotal(table){
        let amounts = 0;
        table.forEach(line => {
          amounts += Number(line.bd_table1_lineAmount);
        });

        amounts = Number.isNaN(amounts) ? 0  : amounts;
        return toFixed(amounts);
    },

    selectFiles(event) {
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then(resArr => {
        resArr.forEach(function(res, i) {
          self.attachedFiles.push({
            name: event.target.files[i].name,
            status: 1,
            id: res.data.datas[0].id
          });

          self.emitToParent();
        });
      });
    },
    changeFiles(index, item) {
      deleteFile({
        id: item.id
      }).then(res => {
        if (res.code != 1) {
          this.$message.error("删除失败，请检查网络后重试");
        } else {
          this.attachedFiles.splice(index, 1);
          self.emitToParent();
        }
      });
    },
    handleOver(item) {
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item) {
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event) {
      window.open("http://47.104.93.41/api/common/download?id=" + id);
    },

    addNewLine(currentIndex, table) {
      let lastLine = _.cloneDeep(table[currentIndex]), newLine = {};
      let keys = [
        'bd_table1_products',
        'bd_table1_description',
        'bd_table1_quantity',
        'bd_table1_price',
        'bd_table1_lineAmount'
      ];

      kes.forEach(key => {
        newLine[key] = lastLine[key];
      });

      table.splice(currentIndex + 1, 0, newLine);
      this.emitToParent();
    },
    removeCurrentLine(currentIndex, table) {
      if (table.length > 1) {
        table.splice(currentIndex, 1);
        this.emitToParent();
      }
    },

    /**
     * 处理其他 input  输入
     */
    handleSimpleInput(key, event){
      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },

    spanMethod({ row, column, rowIndex, columnIndex }) {
      let lines = this.data.bd_table1.length;
      if (lines - 1 === rowIndex) {
        switch (columnIndex) {
          case 0:
            return [1, 5];
            break;
          case 1:
          case 2:
          case 3:
          case 4:
          case 6:
            return [0, 0];
          case 5:
            return [1, 2];
        }
      }
    },

        /**选择币种 */
    currencySel(name){

        return (h, {column, $index}) => {
    
        let self = this;
        var selAttr = {};
        if (!this.editable){
         selAttr.disabled = 'disabled';
         }

        return  h("div", {
          attrs: {
            class: "select-currency"
          }
        }, [
          h("span", name),
          h("select", {
            attrs: {...selAttr},
            domProps: {
             value: self.bd_currencyValue
            },
          on: {
            change: function(event){
              self.bd_currencyValue = event.target.value;
              handleEmit(null, ()=> {
               self.emitToParent();
              });
            }
          }
          },[
            h("option", "人民币"),
            h("option", "美元"),
            h("option", "加元"),
            h("option", "欧元"),
          ])
        ]);
      }
    },

     currentSelEN(name){
      return (h, {column, $index}) => {
        let temp;
        switch (this.bd_currencyValue){
          case '人民币':
          temp = 'RMB';
          break;
          case '美元':
          temp = 'USD';
          break;
          case '欧元':
          temp = 'EUR';
          break;
          case '加元':
          temp = 'CAD';
          break;
        }
        return h('div',null, `${name}(${temp})`);
      }
    },

  },

  
  updated(){

  },

  props: {
    businessformNO: {
      type: String,
      required: true
    },
    datas: {
      type: Object,
      required: true
    },
    bus: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
            id: '',
            formInstId: '',
            attachedFiles: [], //票据附件
            //合同头部信息
            bd_no: "", //编号
            bd_date: "", //日期
            bd_seller: "", //卖方
            bd_sellerAddress: "", //卖方地址
            bd_sellerTel: "", //卖方电话
            bd_sellerFax: "", //卖方传真
            bd_sellerEmail: "", //卖方邮箱

            bd_sellerOptions: ["xxx", "yyy"],

            bd_currencyValue: "人民币",

            //卖方开户行信息，英文版
            bd_en_name: "",
            bd_en_bankOfDeposit: "",
            bd_en_account: "",

            //卖方开户行信息，中文版
            bd_ch_name: "",
            bd_ch_bankOfDeposit: "",
            bd_ch_account: "",

            bd_depositMoney: 0, //定金
            bd_balanceMoney: 0, //尾款

            bd_table1_amount: 0,

            bd_table1: [
              {
                bd_table1_products: "",
                bd_table1_description: "",
                bd_table1_quantity: "",
                bd_table1_price: "",
                bd_table1_lineAmount: "",
              }
            ],
            
            keys: [
            "id",
            "formInstId",
            'attachedFiles',
            'bd_no',
            'bd_date',
            'bd_seller',
            'bd_sellerAddress',
            'bd_sellerTel',
            'bd_sellerFax' ,
            'bd_sellerEmail',
            'bd_sellerOptions',
            'bd_currencyValue',
            'bd_ch_name',
            'bd_ch_bankOfDeposit',
            'bd_ch_account',
            'bd_depositMoney',
            'bd_balanceMoney',
            'bd_table1',
            'bd_table1_amount'
            ],
            fromFCOrderNumber: '',//来自外贸的合同编号
            businessMesg: [],
            currentSelMesg: {},
            prevMapCur: {
            "bf_table1_product": "bd_table1_products",
            'bf_table1_description': "bd_table1_description",
            'bf_table1_price': "bd_table1_price",
            'bf_table1_lineAmount': "bd_table1_lineAmount",
            'bf_table1_quantity': "bd_table1_quantity"
           }

    };
  },
  components: {
      exportExcel
  }
};
</script>

<style lang="scss">
.domestictradecontract {
  padding: 20px;
  border: 1px solid #999;
  font-size: 15px;
  line-height: 30px;

  .relate-color {
    // background-color: #efa54b36 !important;

    input {
      background-color: transparent !important;
    }
  }

  .select-currency {
    select {
      margin-left: 12px;
      height: 30px;
      width: 60px;
    }
  }
  p {
    padding: 5px 0;
    span {
      font-weight: bolder;
    }
  }
  .export {
    float: right;
  }
  .table-title {
    padding: 10px 0;
  }
  .head-title {
    text-align: center;
    position: relative;
    h2 {
      padding: 20px;
    }

    .tcf-png {
      position: absolute;
      width: 90px;
      left: 48px;
      top: 6px;
    }
  }
  .head {
    h2 {
      text-align: center;
    }
    .head-ctrl {
      height: 60px;
      .order-number {
        padding: 16px 0;
        float: left;
      }
      button {
        float: right;
      }
    }
  }

   .head-1, .head-3, .head-4{
       .address-input {
              width: 94%;
              border: 1px solid #999;
              height: 32px;
              border-radius: 4px;
              padding-left: 10px;
        }
   }

   .head-4 {
     .address-input {
       width: 80%;
     }
   }
  .head-1 {
    .head-1-right {
      float: right;
    }
  }
  .head-2 {
    padding: 20px;
    .el-form-item__label {
      text-align: left;
    }
    p {
      > span {
        font-weight: bolder;
      }
    }
  }
  .head-3 {
    padding: 20px;
    .el-select {
      width: 100%;
    }
    .el-form-item__label {
      text-align: left;
      width: 120px;
    }
  }
  .table {
    padding-top: 10px;

    input {
      border: none;
      outline: none;
      width: 100%;
      height: 100%;
      background-color: transparent;
    }

    td {
      border: 1px solid #e6ebf5;
    }


    .el-table__body-wrapper {
        overflow: hidden;
    }
    
    .el-table thead.is-group th {
      background: #e6e6e6;
      padding-bottom: 0;
      padding-top: 0;
    }
    .cell-edit-input {
      .el-input__inner {
        border: none;
        background: transparent;
        padding: 0;
        text-align: center;
      }
      .el-input-number__decrease,
      .el-input-number__increase {
        width: 20px;
        border: none;
        background: transparent;
      }
      .el-input-number {
        width: 100px;
        min-width: 100px;
      }
    }
  }


  .extra-table {
          .extra-money {
            border: 1px solid #e6ebf5;
            text-align: center;
            color: #5a5e66;

            &:nth-child(1){
              border-top: none;
            }

            .el-col:nth-child(2){
              border-left: 1px solid #e6ebf5;
              border-right: 1px solid #e6ebf5;
            }

            input {
              width: 90%;
              border: none;
              outline: none;
              text-indent: 1em;
              color: #5a5e66;
            }
          }
  }
  .head-4 {
    .el-input {
      width: 500px;
      .el-input__inner {
        border: none !important;
      }
    }
    .sign {
      padding: 10px;
    }
  }
  .upload {
    padding-top: 20px;
    > div {
      border: 1px solid #999;
      padding: 20px 0 40px 20px;
    }
    .upload-btn {
      position: relative;
      > input {
        opacity: 0;
        width: 100px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .upload-files {
      > li {
        width: 300px;
        padding: 10px 0;
        transition: all 0.5s linear;
        &:hover {
          > span {
            color: #409eff;
          }
        }
      }
      font-size: 16px;
      span {
        padding: 0 10px;
        cursor: pointer;
        display: inline;
      }
      span.el-icon-close:hover {
        cursor: pointer;
      }
    }
    .upload-hint {
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
}
</style>
